<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的歌曲列表</title>
</head>
<body>

<div>
    <a  href="space.html">大厅</a>
</div>
<div id="app">
    <!--    对话框-->
    <template>
    <!--    创建对话-->
    <el-button type="button" @click="dialogVisibleColumn = true">创建专辑</el-button>
    <el-dialog title="创建专辑" :visible.sync="dialogVisibleColumn" width="30%">
        <el-form>
            <el-form-item label="专辑名">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisibleColumn = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
  </span>
    </el-dialog>
        <!--    创建对话-->
        <el-dialog title="专辑歌曲列表" :visible.sync="dialogVisibleSong">
            <el-table :data="songData" style="width: 100%">
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column prop="userName" label="作者" width="70"></el-table-column>
                <el-table-column prop="name" label="歌名" width="50"></el-table-column>
                <el-table-column label="播放" width="300" class-name="audio-cell">
                    <template slot-scope="scope">
                        <audio controls :src="scope.row.songPath" @play="handlePlayCount(scope.row)" ></audio>
                    </template>
                </el-table-column>
                <el-table-column prop="likes" label="点赞数" width="50"></el-table-column>
                <el-table-column prop="playCount" label="播放量" width="50"></el-table-column>
<!--                <el-table-column-->
<!--                        label="操作">-->
<!--                    <template slot-scope="scope">-->
<!--                        <el-button type="success" @click="handleLike(scope.row)">点赞/取消</el-button>-->
<!--                        <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>-->
<!--                    </template>-->
<!--                </el-table-column>-->
            </el-table>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChangeSong"
                        @current-change="handleCurrentChangeSong"
                        :current-page="currentPageSong"
                        :page-sizes="[3, 5, 10, 20]"
                        :page-size="5"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalCountSong">
                </el-pagination>
            </div>
        </el-dialog>
        <!-- 添加编辑专辑对话框 -->
        <el-dialog title="管理专辑歌曲" :visible.sync="dialogEditColumn" width="70%">
            <el-table :data="editSongData" style="width: 100%">
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column prop="name" label="歌曲名称"></el-table-column>
                <el-table-column prop="artist" label="歌手"></el-table-column>
                <el-table-column label="是否在专辑" width="120">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.inColumn"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                @change="handleToggleSong(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                        @size-change="handleEditSizeChange"
                        @current-change="handleEditCurrentChange"
                        :current-page="currentEditPage"
                        :page-sizes="[5, 10, 20]"
                        :page-size="pageEditSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalEditCount">
                </el-pagination>
            </div>
        </el-dialog>
    </template>
    <!--    专辑表单-->
    <template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="100"></el-table-column>
            <el-table-column prop="userName" label="作者" width="100"></el-table-column>
            <el-table-column prop="name" label="专辑名" width="100"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="success" @click="handleSelectSong(scope.row)">查看歌曲</el-button>
                    <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    <el-button type="primary" @click="handleEditColumn(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <!--    分页工具-->
    <template>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[3, 5, 10, 20]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">
            </el-pagination>
        </div>
    </template>
</div>
</body>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el:"#app",
        mounted(){
            this.selectColumn();
        },
        methods:{
            selectColumn(){
                axios({
                    method: "get",
                    url: "/MVCDemo/column/getColumnListByUserId?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize
                }).then(resp=>{
                    // 设置表格数据
                    this.tableData = resp.data.rows; // {rows:[],totalCount:100}
                    // 设置总记录数
                    this.totalCount = resp.data.totalCount;
                })
            },
            //分页
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.selectColumn();
            },
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                this.currentPage=val;
                this.selectColumn();
            },
            handleSizeChangeSong(val) {
                this.pageSizeSong = val;
                this.currentPageSong = 1; // 重置到第一页
                this.loadSongs();         // 调用加载歌曲的方法
            },
            handleCurrentChangeSong(val) {
                this.currentPageSong = val;
                this.loadSongs();         // 调用加载歌曲的方法
            },
            submitForm() {//提交表单
                if (!this.formData.name) {
                    this.$message('请填写完整信息');
                    return;
                }
                axios.post("/MVCDemo/column/addColumn", this.formData).then(resp=> {
                    // 显示信息 resp.data=result
                    this.$message(resp.data.message);
                    this.dialogVisibleColumn = false;
                    this.selectColumn();
                }).catch(error=>{
                    this.$message(error.data?.message || '上传失败');
                });
            },
            handleDelete(column) {
            this.$confirm('此操作将永久删除该专辑, 是否继续?', '提示', {
               confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
             }).then(() => {
                axios.post("/MVCDemo/column/deleteColumn?columnId="+column.id)
                .then(resp => {
                    alert(resp.data.message);
                    this.selectColumn();
                })
             });
            },

            loadSongs() {
                axios.get("/MVCDemo/column/getSongListByPageAndColumnId", {
                    params: {
                        columnId: this.selectedColumnId, // 需要记录当前选中的专辑ID
                        currentPage: this.currentPageSong,
                        pageSize: this.pageSizeSong
                    }
                }).then(resp => {
                    this.songData = resp.data.rows;
                    this.totalCountSong = resp.data.totalCount;
                });
            },
            handleSelectSong(column) {
                this.dialogVisibleSong = true;
                this.selectedColumnId = column.id; // 保存专辑ID
                this.currentPageSong = 1;          // 重置到第一页
                this.pageSizeSong = 5;             // 重置每页条数
                this.loadSongs();                   // 加载歌曲
            },
            handleEditColumn(column) {
                this.dialogEditColumn = true;
                this.currentEditColumnId = column.id;
                this.loadEditSongs();
            },

            // 加载可编辑歌曲列表
            loadEditSongs() {
                axios.get("/MVCDemo/column/getSongListByPageAndColumnIdWithNull", {
                    params: {
                        columnId: this.currentEditColumnId,
                        currentPage: this.currentEditPage,
                        pageSize: this.pageEditSize
                    }
                }).then(resp => {
                    this.editSongData = resp.data.rows.map(song => ({
                        ...song,
                        inColumn: song.columnId === this.currentEditColumnId
                    }));
                    this.totalEditCount = resp.data.totalCount;

                });
            },

            // 切换歌曲状态
            handleToggleSong(song) {
                const api = song.inColumn ? "/MVCDemo/column/inColumn" : "/MVCDemo/column/outColumn";//alert(this.currentEditColumnId);alert(api);alert(song.id)
                axios.get(api, {
                    params: {
                        columnId: this.currentEditColumnId,
                        songId: song.id,
                    }
                }).then(resp => {
                    this.$message(resp.data.message);
                    this.loadEditSongs(); // 刷新列表
                }).catch(error => {
                    this.$message.error('操作失败');
                    song.inColumn = !song.inColumn; // 回滚状态
                });
            },
            // 分页处理
            handleEditSizeChange(val) {
                this.pageEditSize = val;
                this.currentEditPage = 1;
                this.loadEditSongs();
            },
            handleEditCurrentChange(val) {
                this.currentEditPage = val;
                this.loadEditSongs();
            }
        },
        data() {
            return {
                //专辑类
                formData: {
                    name: '',
                },
                //创建专辑对话框显示状态
                dialogVisibleColumn: false,
                //查看专辑中歌曲对话框显示状态
                dialogVisibleSong: false,
                //专辑集合
                tableData: [],
                //展示歌曲集合
                songData:[],
                //每页显示多少条
                pageSize:5,
                //当前页码号
                currentPage: 1,
                //总专辑数
                totalCount:100,
                //每页显示多少条
                pageSizeSong:5,
                //当前页码号
                currentPageSong: 1,
                //总歌曲数
                totalCountSong:100,

                selectedColumnId: null,
                dialogEditColumn: false,
                editSongData: [],
                currentEditPage: 1,
                pageEditSize: 5,
                totalEditCount: 0,
                currentEditColumnId: null
            };
        }
    })
</script>
